﻿<UserControl
    x:Class="WinRTXamlToolkit.Sample.Views.ImageButtonTestView"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinRTXamlToolkit.Controls"
    xmlns:local="using:WinRTXamlToolkit.Sample.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <controls:ImageButton
            Stretch="Fill"
            Width="40"
            Height="35"
            NormalStateImageSource="ms-appx:///Assets/Images/RedButton_Idle.png"
            HoverStateImageSource="ms-appx:///Assets/Images/RedButton_Hover.png"
            PressedStateImageSource="ms-appx:///Assets/Images/RedButton_Pressed.png" />

        <StackPanel
            VerticalAlignment="Center"
            HorizontalAlignment="Center">
            <controls:ImageButton
                HorizontalAlignment="Center"
                NormalStateImageSource="ms-appx:///Assets/Images/RedButton_Idle.png"
                PressedStateImageSource="ms-appx:///Assets/Images/RedButton_Pressed.png" />
            <TextBlock
                Text="Two state ImageButton"
                Style="{StaticResource TitleTextStyle}" />
        </StackPanel>

        <StackPanel
            Grid.Column="1"
            VerticalAlignment="Center"
            HorizontalAlignment="Center">
            <controls:ImageButton
                HorizontalAlignment="Center"
                NormalStateImageSource="ms-appx:///Assets/Images/RedButton_Idle.png"
                HoverStateImageSource="ms-appx:///Assets/Images/RedButton_Hover.png"
                PressedStateImageSource="ms-appx:///Assets/Images/RedButton_Pressed.png" />
            <TextBlock
                Text="Three state ImageButton"
                Style="{StaticResource TitleTextStyle}" />
        </StackPanel>

        <StackPanel
            Grid.Row="1"
            VerticalAlignment="Center"
            HorizontalAlignment="Center">
            <controls:ImageButton
                HorizontalAlignment="Center"
                RecyclePressedStateImageForHover="True"
                NormalStateImageSource="ms-appx:///Assets/Images/RedButton_Idle.png"
                PressedStateImageSource="ms-appx:///Assets/Images/RedButton_Pressed.png" />
            <TextBlock
                Style="{StaticResource TitleTextStyle}"
                TextAlignment="Center">
                <TextBlock.Inlines>
                    <Run
                        Text="Three state ImageButton" />
                    <LineBreak />
                    <Run
                        Text="Hover state image from semi-transparent PressedStateImageSource" />
                    <LineBreak />
                    <Run
                        Text="overlaid on top of the NormalStateImageSource" />
                    <LineBreak />
                    <Run
                        Text="(only two bitmaps necessary)" />
                </TextBlock.Inlines>
            </TextBlock>
        </StackPanel>

        <StackPanel
            Grid.Column="1"
            Grid.Row="1"
            VerticalAlignment="Center"
            HorizontalAlignment="Center">
            <controls:ImageButton
                HorizontalAlignment="Center"
                NormalStateImageSource="ms-appx:///Assets/Images/RedButton_Idle.png"
                GenerateMissingImages="True" />
            <TextBlock
                Style="{StaticResource TitleTextStyle}"
                LineStackingStrategy="MaxHeight"
                TextAlignment="Center">
                <TextBlock.Inlines>
                    <Run
                        Text="Three state ImageButton" />
                    <LineBreak />
                    <Run
                        Text="Active state image bitmaps generated from NormalStateImageSource" />
                    <LineBreak />
                    <Run
                        Text="with some image processing to lighten its pixels" />
                    <LineBreak />
                    <Run
                        Text="(only one bitmap necessary)" />
                </TextBlock.Inlines>
            </TextBlock>
        </StackPanel>

        <StackPanel
            Grid.Row="2"
            VerticalAlignment="Center"
            HorizontalAlignment="Center">
            <controls:ImageButton
                HorizontalAlignment="Center"
                NormalStateImageSource="ms-appx:///Assets/Images/RedButton_Idle.png"
                GenerateMissingImages="True"
                IsEnabled="False" />
            <TextBlock
                Style="{StaticResource TitleTextStyle}"
                LineStackingStrategy="MaxHeight"
                TextAlignment="Center">
                <TextBlock.Inlines>
                    <Run
                        Text="Disabled ImageButton" />
                    <LineBreak />
                    <Run
                        Text="Disabled image bitmap generated from NormalStateImageSource" />
                    <LineBreak />
                    <Run
                        Text="with some image processing to make its pixels grayscale" />
                </TextBlock.Inlines>
            </TextBlock>
        </StackPanel>

        <StackPanel
            Grid.Column="1"
            Grid.Row="2"
            VerticalAlignment="Center"
            HorizontalAlignment="Center">
            <StackPanel
                Orientation="Horizontal"
                VerticalAlignment="Center"
                HorizontalAlignment="Center">
                <controls:ImageButton
                    HorizontalAlignment="Center"
                    NormalStateImageSource="ms-appx:///Assets/Images/RedButtonMultiScale.png"
                    GenerateMissingImages="True" />
                <controls:ImageButton
                    HorizontalAlignment="Center"
                    NormalStateImageSource="ms-appx:///Assets/Images/GreenButtonMultiScale.png"
                    GenerateMissingImages="True" />
            </StackPanel>
            <TextBlock
                Style="{StaticResource TitleTextStyle}"
                LineStackingStrategy="MaxHeight"
                TextAlignment="Center">
                <TextBlock.Inlines>
                    <Run
                        Text="ImageButtons with multi-scale image assets" />
                    <LineBreak />
                    <Run
                        Text="Red one uses images with '.scale-100/140/180' name sufixes" />
                    <LineBreak />
                    <Run
                        Text="Green one uses images found in 'scale-100/140/180' folders" />
                    <LineBreak />
                    <Run
                        Text="Active state images are generated from NormalStateImageSource" />
                </TextBlock.Inlines>
            </TextBlock>
        </StackPanel>
    </Grid>
</UserControl>
